<template>
    <div>
      <div class="main-tab">
        <x-header id="header" :left-options="{backText: ''}" class="top"><span class="tit">我的收藏</span></x-header>
        <div class="main-headerAndTab">
          <tab bar-active-color="#AD2532" :line-width="2" custom-bar-width="1.43rem" active-color="#AD2532" default-color="#9B9B9B">
            <tab-item selected  active-class="active-1" @click.native="handle1">资讯</tab-item>
            <tab-item active-class="active-1" @click.native="handle2">商品</tab-item>
            <tab-item active-class="active-1" @click.native="handle3">帖子</tab-item>
            <tab-item active-class="active-1" @click.native="handle4">图赏</tab-item>
          </tab>
          <div>
            <group v-show="flag1">
              <cell-box v-for=" (item, index) in article" :key="item.id">
                <div class="article">
                  <span class="title">{{item.title}}</span>
                  <span class="date">{{item.date}}</span>
                </div>
              </cell-box>
            </group>
            <group v-show="flag2">
              <cell-box v-for=" (item, index) in goods" :key="item.id">
                <div class="goods">
                  <span class="title">{{item.goodsname}}</span>
                  <span class="price">￥<span class="pricenumber">{{item.price}}</span></span>
                </div>
              </cell-box>
            </group>
            <group v-show="flag3">
              <cell-box  v-for=" (item, index) in post" :key="item.id">
                <div class="post">
                  <span class="post-title">{{item.post_title}}</span>
                  <span class="post-date">{{item.post_date}}<span class="post-date-hour"></span>{{item.post_hour}}</span>
                </div>
              </cell-box>
            </group>
            <group v-show="flag4">
              <cell-box  v-for=" (item, index) in price" :key="item.id">
                <div class="post">
                  <span class="post-title">{{item.price_title}}</span>
                  <span class="post-date">{{item.price_date}}<span class="post-date-hour"></span>{{item.price_hour}}</span>
                </div>
              </cell-box>
            </group>
          </div>
          <div class="more">没有更多了哦～</div>
        </div>
      </div>
    </div>
</template>

<script>
  import {getUserCollectArticleList} from '@/api/user';
  import { cookie } from 'vux'
  export default {
        name: "collection",
      data(){
          return{
            cid:63,
            flag1:true,
            flag2:false,
            flag3:false,
            flag4:false,
            article:[
              {
                id:0,
                title:'文章标题',
                date:'2019-01-02',
              },
              {
                id:1,
                title:'文章标题',
                date:'2019-01-01',
              },
              {
                id:2,
                title:'文章标题',
                date:'2019-01-03',
              }
            ],
            goods:[
              {
                id:0,
                goodsname:'软装中华',
                price:88
              },
              {
                id:1,
                goodsname:'软装中华',
                price:888
              },
              {
                id:2,
                goodsname:'软装中华',
                price:8888
              },
            ],
            post:[
              {
                id:0,
                post_title:'七星软黑日式完税版外包装欣赏及口感测评',
                post_date:'2019-01-01',
                post_hour:'09:00'
              },
              {
                id:1,
                post_title:'七星软黑日式完税版外包装欣赏及口感测评',
                post_date:'2019-01-01',
                post_hour:'09:00'
              },
              {
                id:2,
                post_title:'七星软黑日式完税版外包装欣赏及口感测评',
                post_date:'2019-01-01',
                post_hour:'09:00'
              },
              {
                id:3,
                post_title:'七星软黑日式完税版外包装欣赏及口感测评',
                post_date:'2019-01-01',
                post_hour:'09:00'
              }
            ],
            price:[
              {
                id:0,
                price_title:'七星软黑日式完税版外包装欣赏及口感测评',
                price_date:'2019-01-01',
                price_hour:'09:00'
              },
              {
                id:1,
                price_title:'七星软黑日式完税版外包装欣赏及口感测评',
                price_date:'2019-01-01',
                price_hour:'09:00'
              },
              {
                id:2,
                price_title:'七星软黑日式完税版外包装欣赏及口感测评',
                price_date:'2019-01-01',
                price_hour:'09:00'
              },
            ]
          }
      },
      methods:{
        handle1(){
          this.flag1=true;
          this.flag2=false;
          this.flag3=false;
          this.flag4=false
        },
        handle2(){
          this.flag2=true;
          this.flag1=false;
          this.flag3=false;
          this.flag4=false
        },
        handle3(){
          this.flag2=false;
          this.flag1=false;
          this.flag3=true;
          this.flag4=false
        },
        handle4(){
          this.flag2=false;
          this.flag1=false;
          this.flag3=false;
          this.flag4=true
        },
        getUserCollectArticleList(){
          // this.cid=JSON.parse(cookie.get('userInfo')).id;
          getUserCollectArticleList(parseInt(this.cid)).then(res =>{
            console.log(res)
          })
        }
      },
    created(){
          this.getUserCollectArticleList();
    }
    }
</script>

<style scoped>
  .top{
    background: #AD2532;
    box-shadow: 0 0 0 0 rgba(0,0,0,0.25);
  }
  .tit{
    margin-top: 8px;
    font-family: "PingFangSC-Semibold",serif;
    font-size: 17px;
    color: #FFFFFF;
    letter-spacing: -0.41px;
    text-align: center;
  }
  .active-1{
    font-family: "PingFangSC-Semibold",serif;
    font-size: 18px;
    color: #AD2532;
    letter-spacing: 0;
    text-align: center;
  }
  .title{
    font-family: "PingFangSC-Semibold",serif;
    font-size: 17px;
    color: #4A4A4A;
    letter-spacing: -0.41px;
    text-align: justify;
    margin-bottom: 0.39rem;
  }
  .date{
    font-size: 12px;
    color: #9B9B9B;
    letter-spacing: -0.29px;
    text-align: justify;
  }
  .article{
    display: flex;
    flex-direction: column;
  }
  .goods{
    display: flex;
    flex-direction: column;
  }
  .price{
    font-size: 14px;
    color: #AD2532;
    letter-spacing: 0;
    text-align: justify;
  }
  .pricenumber{
    font-size: 17px;
    color: #AD2532;
    letter-spacing: 0;
    text-align: justify;
    margin-left: 0.36rem;
  }
  .post{
    display: flex;
    flex-direction: column;
  }
  .post-title{
    font-family: "PingFangSC-Semibold",serif;
    display: block;
    font-size: 17px;
    color: #4A4A4A;
    letter-spacing: 0;
  }
  .post-date{
    font-size: 12px;
    color: #9B9B9B;
    letter-spacing: -0.29px;
    text-align: justify;
    margin-top: 0.72rem;
  }
  .post-date-hour{
    margin-left: 0.36rem;
  }
  .more{
    position: absolute;
    left: 50%;
    margin-left: -3.43rem;
    margin-top: 1.07rem;
    font-size: 14px;
    color: #9B9B9B;
    letter-spacing: -0.34px;
    text-align: justify;
  }
</style>
